<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="我是有底线的哦"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item.group_id" class="dye-card">
        <div class="dye-card-header">
          <span>{{ item.group_id }}</span>
          <span
            style="font-weight: bold"
            :style="{
              color: descObj.previousPdIds.find((pdid) => item.pd_id == pdid)
                ? 'red'
                : 'green',
            }"
            >{{ store.text("groupStatus", item.pd_id) }}</span
          >
        </div>
        <div class="dye-card-body">
          <div
            class="dye-card-body-item"
            :style="{
              color: descObj.previousPdIds.find((pdid) => item.pd_id == pdid)
                ? 'red'
                : 'green',
            }"
          >
            <template
              v-if="descObj.previousNode && isArray(descObj.previousNode)"
            >
              <template
                v-for="preNode in descObj.previousNode"
                :key="preNode.colProp"
              >
                <template v-if="item[preNode.colProp]">
                  <label>{{ preNode.colLabel }}：</label>
                  <span>{{ item[preNode.colProp] }}米</span>
                </template>
              </template>
            </template>
            <template
              v-else-if="descObj.previousNode && !isArray(descObj.previousNode)"
            >
              <template v-if="item[descObj.previousNode.colProp]">
                <label>{{ descObj.previousNode.colLabel }}：</label>
                <span>{{ item[descObj.previousNode.colProp] }}米</span>
              </template>
            </template>
          </div>

          <div
            v-if="descObj.currentNode"
            class="dye-card-body-item"
            style="color: green"
          >
            <label>{{ descObj.currentNode.colLabel }}：</label>
            <span>{{ item[descObj.currentNode.colProp] || 0 }}米</span>
          </div>
          <div class="dye-card-body-item">
            <label>类型：</label>
            <span>{{ store.text('prodTypes',item.plan_type) }}</span>
          </div>
          <div class="dye-card-body-item">
            <label>客户：</label>
            <span>{{ item.cus_name }}</span>
          </div>
          <div class="dye-card-body-item">
            <label>规格：</label>
            <span>{{ item.std_name }}</span>
          </div>
          <div class="dye-card-body-item">
            <label>花色：</label>
            <span>{{ item.color_name }}</span>
          </div>
        </div>

        <div
          v-if="descObj.previousPdIds.find((pdid) => item.pd_id == pdid)"
          class="dye-card-footer"
        >
          <van-button
            type="primary"
            size="small"
            style="margin-right: 0.1rem"
            @click="openSave(item)"
            >录入产量</van-button
          >
          <van-button type="danger" size="small" @click="execConfirm(item)"
            >确认</van-button
          >
        </div>
      </div>
    </van-list>
  </van-pull-refresh>

  <van-action-sheet v-model:show="show" title="产量录入">
    <div class="content">
      <van-field
        v-model="currentItem.num"
        type="number"
        label="下线产量"
        style="
          margin: 0.3rem 0rem;
          border: 0.01rem solid #eeeeee;
          border-radius: 0.05rem;
        "
      />

      <van-button type="primary" block @click="execSave">保存</van-button>
    </div>
  </van-action-sheet>
</template>

<script setup >
import { ref, reactive, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tip, get, post, del, put, store } from "@/common";
import { Toast, Dialog } from "vant";
const route = useRoute();

const list = ref([]); //列表数据

const refreshing = ref(false);

const onRefresh = async () => {
  list.value = [];
  await getPage(1);
  Toast("刷新成功");
  refreshing.value = false;
};

const loading = ref(false);
const finished = computed(() => page.value.current >= page.value.last);
const onLoad = async () => {
  if (page.value.current >= page.value.last) return;
  await getPage(page.value.next);
  loading.value = false;

  if (page.value.current >= page.value.last) {
    console.log(list);
    finished.value = true;
  }
};

//判断对象是否为数组
const isArray = (obj) => {
  return Object.prototype.toString.call(obj) === "[object Array]";
};

const props = defineProps({
  descObj: {
    type: Object,
    default() {
      return {
        urlMark: "pretreat",

        previousPdIds: [1010],
        defaultQueryPdIds: "1010",
        currentPdId: 1020,

        previousNode: {
          colLabel: "上一节点",
          colProp: "previousNode",
        },
        currentNode: {
          colLabel: "当前节点",
          colProp: "currentNode",
        },
      };
    },
  },
});

//获取列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  group_id: "",
  date_start: "",
  date_end: "",
  group_cus: "",
  plan_id: "",
  plan_type: "", // 产品类型
  group_std: "",
  group_color: "",
  group_num_start: 0, //计划查询范围起始数量值
  group_num_end: 0, //计划查询范围结束数量值
  per: "",
  pd_id: "",
  pd_ids: "",
});

const page = ref({ total: 0 });

const getPage = (pageNo) => {
  return new Promise((resolve, reject) => {
    query.pageNum = pageNo || 1;
    //previousPdIds
    query.previousPdIds = props.descObj.previousPdIds.join(",");
    get(`/process/${props.descObj.urlMark}`, query)
      .then((result) => {
        page.value = result.data;
        query.pageNum = page.value.current;
        query.pageSize = page.value.pageSize;
        list.value.push.apply(list.value, page.value.list);
        resolve(result);
      })
      .catch((err) => {
        reject(err);
      });
  });
};

query.pd_ids = props.descObj.defaultQueryPdIds || "";
//getPage(1);

//确定下线产量
const execConfirm = (row) => {
  Dialog.confirm({
    title: "提示",
    message: "您实要确认该下线产量吗？",
  })
    .then(() => {
      put(
        `/process/${props.descObj.urlMark}/done/${row.group_id}`,
      ).then((result) => {
        onRefresh();
        tip.success("确认成功！");
      });
    })
    .catch(() => {
      // on cancel
    });
};

//保存下线产量
const execSave = () => {
  put(
    `/process/${props.descObj.urlMark}/save/${currentItem.group_id}/${currentItem.num}`
  ).then((result) => {
    currRow[props.descObj.urlMark+"_num"] = currentItem.num;
    tip.success("保存成功！");
    currentItem.num = "";
    currentItem.group_id = "";
    show.value = false;
  });
};

const show = ref(false);
let currRow = null;
const currentItem = reactive({
  num: "",
  group_id: "",
});

const openSave = (row) => {
  currRow = row;
  currentItem.group_id = row.group_id;
  show.value = true;
  // ElMessageBox.prompt(`请输入${route.meta.navName}下线产量:`, '产量录入', {
  //   confirmButtonText: '保存',
  //   cancelButtonText: '取消',
  //   inputPattern:
  //     /0\.[1-9]|[1-9][0-9]*\.[1-9]|[1-9][0-9]*/,
  //   inputErrorMessage: '错误产量！',
  // })
  //   .then(({ value }) => {
  //     execSave(row,value);
  //   })
  //   .catch(() => {
  //   })
};

const refresh = ({ pd_ids, pd_id, pageNo }) => {
  query.pd_ids = pd_ids || "";

  query.pd_id = pd_id || "";

  onRefresh();

  // if (pageNo) {
  //   getPage(pageNo);
  // } else {
  //   getPage(page.value.current);
  // }
};
defineExpose({ refresh });
</script>

<style scoped>
.dye-card {
  border-bottom: 0.01rem solid #eeeeee;
  /* box-shadow: 0px 0.01rem 0.01rem 0px #F5F5F5; */
}

.dye-card > .dye-card-header {
  padding: 0.08rem 0.15rem 0.06rem;
  font-size: 0.16rem;
  color: #666666;
  box-shadow: 0rem 0.01rem 0.03rem 0rem #f5f5f5;

  display: flex;
  justify-content: space-between;
}
.dye-card > .dye-card-body {
  padding: 0.1rem 0.2rem;
}
.dye-card > .dye-card-body > .dye-card-body-item {
  padding: 0.03rem 0rem;
  font-size: 0.14rem;
  display: flex;
  justify-content: space-between;
}
.dye-card > .dye-card-footer {
  padding: 0.1rem 0.15rem;
  display: flex;
  justify-content: flex-end;
}
.content {
  padding: 16px 16px 160px;
}
</style>